import Qt 4.7

Rectangle {
    id: container

    property alias text: buttonText.text

    signal clicked

    border.color: "#919191"
    border.width: 1
    radius: 2
    width: 150
    height: 30
    anchors.margins: 5

    MouseArea {
        id: mouseRegion
        anchors.fill: parent
        hoverEnabled: true
        onClicked: container.clicked()
    }

    Text {
        id: buttonText
        color: "#556168"
        anchors.centerIn: parent
        font.pixelSize: parent.height * 0.6
    }

    states: [
        State {
            name: "Focused"
            when: mouseRegion.containsMouse && !mouseRegion.pressed
            PropertyChanges { target: gradientStop00; color: "#F6F3F3" }
            PropertyChanges { target: gradientStop02; color: "#F6F3F3" }
            PropertyChanges { target: gradientStop08; color: "#F6F3F3" }
            PropertyChanges { target: gradientStop10; color: "#D5D1D1" }
        },
        State {
            name: "Pressed"
            when: mouseRegion.containsMouse && mouseRegion.pressed
            PropertyChanges { target: gradientStop00; color: "#CBC9C9" }
            PropertyChanges { target: gradientStop02; position: 0.2; color: "#EEECEC" }
            PropertyChanges { target: gradientStop08; position: 0.8; color: "#EEECEC" }
            PropertyChanges { target: gradientStop10; color: "#D4D0D0" }
        }
    ]

    gradient: Gradient {
        GradientStop { id: gradientStop00; position: 0.0; color: "#F6F3F3" }
        GradientStop { id: gradientStop02; position: 0.0; color: "#F6F3F3" }
        GradientStop { id: gradientStop08; position: 0.0; color: "#F6F3F3" }
        GradientStop { id: gradientStop10; position: 1.0; color: "#CAC7C7" }
    }
}

